<template>
	<view class="container">
		<!-- 列表 -->
		<zy-cell :cellList="cellList" @clickHandler='clickListHandler' />
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		computed: {
			cellList() {
				return [{
					iconfont: 'iconfont icon-zhongwen',
					text: this.$t('my.set.zh'),
					code: "zh-Hans",
					sufIcon: "",
				}, {
					iconfont: 'iconfont icon-yingwen',
					text: this.$t('my.set.en'),
					code: "en",
					sufIcon: '',
				}, {
					iconfont: 'iconfont icon-yingwen',
					text: this.$t('my.set.vt'),
					code: "vt",
					sufIcon: '',
				}]
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			})
			this.cellList.forEach((item, index) => {
				if (this.applicationLocale == item.code) {
					this.cellList[index].sufIcon = "iconfont icon-duihao"
				} else {
					this.cellList[index].sufIcon = ""
				}
			})
		},
		methods: {
			// 单元格点击事件
			clickListHandler(e) {
				this.cellList.forEach((item, index) => {
					if (e.index == index) {
						this.cellList[index].sufIcon = "iconfont icon-duihao"
					} else {
						this.cellList[index].sufIcon = ""
					}
				})
				if (this.isAndroid) {
					uni.showModal({
						content: this.$t('my.set.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(e.item.code);
							}
						}
					})
				} else {
					uni.setLocale(e.item.code);
					this.$i18n.locale = e.item.code;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin-top: 10px;
	}
</style>